import { useState } from 'react';
import { NavBar, List, Space, Image } from 'antd-mobile';
import { useHistory } from 'react-router-dom';

import './style.scss';

export default function() {
  const history = useHistory();

  return (<div className="callDetailPage">
    <NavBar onBack={() => history.goBack()} style={{ background: '#fff', border: 'none' }}>通话详情</NavBar>
    <List style={{ '--border-top': 0, '--border-bottom': 0, '--border-inner': 0 }}>
      <List.Item>
        杨乐发起的音视频会议
      </List.Item>
    </List>
    <List style={{ '--border-top': 0, '--border-bottom': 0, marginTop: 12 }}>
      <List.Item>
        <Space style={{ '--gap': '30px' }}>
          <div style={{ width: 68 }}>开始时间</div>2022年05月10日 15:34
        </Space>
      </List.Item>
      <List.Item>
        <Space style={{ '--gap': '30px' }}>
          <div style={{ width: 68 }}>介绍时间</div>2022年05月10日 15:34
        </Space>
      </List.Item>
      <List.Item>
        <Space style={{ '--gap': '30px' }}>
          <div style={{ width: 68 }}>会议时长</div>13分钟20秒
        </Space>
      </List.Item>
      <List.Item>
        <Space style={{ '--gap': '30px' }}>
          <div style={{ width: 68 }}>发起人</div>林育
        </Space>
      </List.Item>
    </List>
    <List style={{ '--border-top': 0, '--border-bottom': 0, marginTop: 12 }}>
      <List.Item
        extra="11人"
        onClick={() => {}}>
          参会人员
      </List.Item>
      <List.Item>
        <Space>
          <Image style={{ borderRadius: '8px' }} src={'1'} width={42} height={42} fit='fill' />
        </Space>
      </List.Item>
    </List>
  </div>)
}